<template>
	<div class="_wrapper _rel _flex-y _flex-around">
		<div class="video-box _flex-item-1">
			<div v-if="aiModelType === 'origin'" id="playWnd" ref="playWnd" class="_page _wrapper playWnd _cart" />
			<div class="_wrapper _cart" v-else-if="aiUrl">
				<iframe class="_wrapper" :src="'http://h5.zzfmhb.com/ai-show.html?aiUrl='+aiUrl"
					frameborder="0"></iframe>
				<!-- <el-image class="_wrapper" :src="aiUrl" @load="aiImgLoading = false" @error="aiImgLoading = false" :preview-src-list="[aiUrl]">
          <div slot="error" class="_abs-ct _text-a-c">
            <i class="el-icon-picture-outline _font" style="font-size: 200px;"></i><br>
            <span class="_font">该环境不支持AI实时分析，请联系工作人员...</span>
          </div>
        </el-image> -->
			</div>
		</div>
		<!-- <button class="_btn-1 _m-t-10" @click="closeVideo">
			断开视频链接
		</button> -->
		<div class="_wrapper _p10 _flex _flex-a-start fun-box _over-hidden">
			<div class="_flex _flex-wrap _flex-around com-btns _m-r-10">
				<el-button @click="videoAction('LEFT_UP')" type="info">左上</el-button>
				<el-button @click="videoAction('UP')" type="primary">上</el-button>
				<el-button @click="videoAction('RIGHT_UP')" type="info">右上</el-button>
				<el-button @click="videoAction('LEFT')" type="primary">左</el-button>
				<el-button @click="videoAction('LEFT', 1)" type="danger">停止</el-button>
				<el-button @click="videoAction('RIGHT')" type="primary">右</el-button>
				<el-button @click="videoAction('LEFT_DOWN')" type="info">左下</el-button>
				<el-button @click="videoAction('DOWN')" type="primary">下</el-button>
				<el-button @click="videoAction('RIGHT_DOWN')" type="info">右下</el-button>
				<el-button @click="videoAction('ZOOM_IN')" type="success">拉近</el-button>
				<!--
        <el-button @click="videoAction('START_RECORD_TRACK')">START_RECORD_TRACK</el-button>
        <el-button @click="videoAction('STOP_RECORD_TRACK')">STOP_RECORD_TRACK</el-button>
        <el-button @click="videoAction('START_TRACK')">START_TRACK</el-button>
        <el-button @click="videoAction('STOP_TRACK')">STOP_TRACK</el-button> -->
				<div></div>
				<el-button @click="videoAction('ZOOM_OUT')" type="success">拉远</el-button>
				<!-- <el-button @click="videoAction('FOCUS_FAR')" type="warning">光圈扩大</el-button>
        <el-button @click="videoAction('WIPER_SWITCH')" type="warning">雨刷</el-button>
        <el-button @click="videoAction('IRIS_REDUCE')" type="warning">光圈缩小</el-button> -->
			</div>
			<div class="_wrapper-y _m-r-10">
				<div class="_box-scroll _over-scroll-hidden _wrapper-y">
					<div class="_flex _flex-space-x _m-b-5">
						<el-input v-model="presetPointName" size="small" placeholder="请输入预置点名称"></el-input>
						<el-button @click="savePresetPoint()" size="small" type="primary" style="padding: 8px;">保存预置</el-button>
					</div>
					<template v-for="item in presetPoints">
						<div class="_flex _flex-a-start _flex-start _m-b-5 preset-item el-btns">
							<el-button style="width: 150px;" type="primary" size="small"
								@click="movePresetPoint(item.cameraIndexCode, item.presetPointIndex)">
								{{item.presetPointName}}
								({{(defaultCronConfig.find(config => config.presetPointIndex == item.presetPointIndex) || {}).time || '未配置'}})
							</el-button>
							<el-button type="danger" size="small"
								@click="removePresetPoint(item.cameraIndexCode, item.presetPointIndex)">删除
							</el-button>
							<el-button type="primary" size="small" @click="cronConfig(item.cameraIndexCode, item.presetPointIndex)">定时配置
							</el-button>
						</div>
					</template>
				</div>
			</div>
			<div class="_cart _p-b-10">
				<div class="_font-title _font-big _text-a-c _wrapper-x _p10">AI视频分析</div>
				<el-radio-group v-model="aiModelType" size="small">
					<div class="_flex _flex-wrap _flex-around _flex-space _p10">
						<div v-for="item in $store.state.ai.videoTypeList">
							<el-radio :label="item.val" border>{{item.name}}</el-radio>
						</div>
					</div>
				</el-radio-group>
			</div>
			<div class="_flex-item-1"></div>
		</div>
		<el-drawer title="定时配置" :visible.sync="drawer" direction="ltr" size="20%" :destroy-on-close="true">
			<video-cron-config :deviceCode="currentDeviceCode" :presetPointIndex="currentPresetIndex"
				@close="closeCronConfig" />
		</el-drawer>
	</div>
</template>

<script>
	import toolHkPlug from "./tool-hk-plug.js";
	import hkApi from './ApiHaikang';
	import VideoCronConfig from "./video-cron-config.vue";
	import toolRandom from "@/tool/toolRandom.js";

	export default {
		name: "VideoHk",
		components: {
			VideoCronConfig
		},
		props: ["cameraIndexCode"],
		data() {
			return {
				drawer: false,
				currentDeviceCode: undefined,
				currentPresetIndex: undefined,
				defaultCronConfig: [],
				presetPoints: [],
				presetPointName: "",
				aiModelType: "origin",
				aiUrl: undefined,
				aiImgLoading: false
			}
		},
		mounted() {
			this.initVideo(this.cameraIndexCode);
			this.initCronData();
		},
		watch: {
			cameraIndexCode(val) {
				this.initVideo(val);
			},
			aiModelType(val) {
				if (val !== "origin") {
					hkApi.getAiRealtimeUrl({
						cameraIndexCode: this.cameraIndexCode,
						aiModeType: val
					}).then(res => {
						if (res) {
							this.closeVideo();
							this.aiUrl = res.url;
							this.aiImgLoading = true;
						}
					})
				} else {
					this.initVideo(this.cameraIndexCode);
					this.aiUrl = undefined;
				}
			}
		},
		methods: {
			closeCronConfig() {
				hkApi.saveIotDeviceConfig(this.cameraIndexCode).then(res => {
					if (res && res instanceof Array) {
						this.defaultCronConfig = res;
					}
				})
				this.drawer = false;
			},
			/**
			 * cron 定时任务数据初始化
			 */
			initCronData() {
				hkApi.saveIotDeviceConfig(this.cameraIndexCode).then(res => {
					if (res && res instanceof Array) {
						this.defaultCronConfig = res;
					}
				})
			},
			/**
			 * 定时规则配置
			 * @param {Object} cameraIndexCode
			 * @param {Object} presetIndex
			 */
			cronConfig(cameraIndexCode, presetIndex) {
				this.currentDeviceCode = cameraIndexCode;
				this.currentPresetIndex = presetIndex;
				this.drawer = true;
			},
			/**
			 * 移动到预置点
			 * @param {Object} cameraIndexCode
			 * @param {Object} presetIndex
			 */
			movePresetPoint(cameraIndexCode, presetIndex) {
				hkApi.controlling(this.cameraIndexCode, 0, "GOTO_PRESET", presetIndex);
			},
			/**
			 * 删除预置点信息
			 * @param {Object} cameraIndexCode
			 * @param {Object} presetIndex
			 */
			removePresetPoint(cameraIndexCode, presetIndex) {
				hkApi.delPresetPoint(cameraIndexCode, presetIndex).then(() => {
					this.initPresetPointList();
				});
			},
			/**
			 * 保存预置点信息
			 */
			savePresetPoint() {
				hkApi.presetPoint(this.cameraIndexCode, this.presetPointName, toolRandom.randomNum(1, 300)).then(() => {
					this.initPresetPointList();
				});
			},
			/**
			 * 监控云台操作
			 * @param {Object} command 动作
			 * @param {Object} action 开始0 停止1
			 */
			videoAction(command, action = 0) {
				hkApi.controlling(this.cameraIndexCode, action, command);
			},
			closeVideo() {
				toolHkPlug.closeVideo();
			},
			initPresetPointList() {
				hkApi.queryPresetPoint(this.cameraIndexCode).then(res => {
					this.presetPoints = res.list;
				})
			},
			initVideo(cameraIndexCode) {
				toolHkPlug.initPlugin(cameraIndexCode, "playWnd", "1x1");
				this.initPresetPointList();
			}
		}
	}
</script>

<style scoped>
	.video-box {
		width: 100%;
		padding: 10px;
		padding-bottom: 0;
	}

	.fun-box {
		height: 165px;
	}

	.preset-item>* {
		margin-right: 5px;
		margin-left: 0;
	}

	.com-btns {
		width: 240px;
	}

	.com-btns>* {
		width: 31%;
		margin-left: 0;
		margin-bottom: 5px;
		padding: 8px;
	}

	.el-btns>* {
		padding: 8px;
	}
</style>
